<template>
  <view class="myOrderBox">
  	<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
  	<view class="myOrderContent flex-column" v-show="goodsShow" v-for="(item,index) in allOrderData" :key="index">
      <view style="margin-right: 5px;">
        <view style="color: #aa0000;float: right;font-weight: 600;">
          <u-icon name="hourglass" color="#aa0000" size="28"></u-icon>
          <text style="margin-left: 2px;">
            使用时长: {{ item.endTime == undefined ? '使用中' : parseInt(((( new Date(item.endTime) - new Date(item.startTime) ).valueOf()) % (1000 * 60 * 60)) / (1000 * 60)) + '分钟'}}
          </text>
        </view>
      </view>
      <view>
        <u-icon name="car" color="#0078af" size="34"></u-icon>
        <text class="m-l2" style="color: #0078af;">充电仓名称: {{item.cabinetName + item.smartName}}</text>
      </view>
      <view style="margin: 1% 0;">
        <u-icon name="map" color="#55aa7f" size="34"></u-icon>
        <text class="m-l2" style="color: #55aa7f;">位置: {{item.cabinetLocation}}</text>
      </view>
      <view style="margin: 1% 0;">
        <u-icon name="clock" color="#787878" size="34"></u-icon>
        <text class="m-l2" style="color: #787878;">开柜时间: {{item.startTime}}</text>
      </view>
      <view style="margin: 1% 0;">
        <u-icon name="clock-fill" color="#787878" size="34"></u-icon>
        <text class="m-l2" style="color: #787878;">结束时间: {{item.endTime == undefined ? '充电仓使用中' : item.endTime}}</text>
      </view>
  		<view class="flex-row myOrderFooter">
  			<view>订单编号: {{item.uuid}}</view>
  		</view>
      <view style="margin-top: 1%;" v-show="item.status">
        <u-button size="mini" type="error" style="float: right;" @click="closeCabinet(item)">一键关仓</u-button>
      </view>
      <view class="cabinetStatus" :style="item.status ? 'color: #cbffca;' : 'color: #ffffff'">{{ item.status ? '使用中' : '已完成'}}</view>
  	</view>
  	<view v-show="goodsShow == false" class="noGoodsBox flex-column">
  		<image src="../../static/no-order.png" class="noGoodsImg"></image>
  		<text>暂无订单信息</text>
  		<text>记得要安全充电哦 ~</text>
  	</view>
  </view>
</template>

<script>
  import { getOrder, cabinetControl } from "@/common/js/api/api.js";
	export default {
    onLoad() {
      uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
      this.getOrderList();
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 500);
    },
		data() {
			return {
				list: [{
					name: '全部',
          count: 0
				}, {
					name: '使用中',
          count: 0
				}, {
					name: '已完成',
          count: 0
				}],
				current: 0,
				customStyle: {
					marginTop: '3%',
					float: 'right'
				},
				goodsShow: false,
        allOrderData: []
			}
		},
		methods: {
      getOrderList() {
        getOrder().then((resq) => {
          getOrder({
            page: 0,
            size: resq.data.totalElements
          }).then(res => {
            if(res.data.totalElements != 0) {
              this.list[0].count = res.data.totalElements;
              this.goodsShow = true;
              var i = 0;
              var j = 0;
              var data = [];
              res.data.content.forEach(item => {
                item.cabinetAddr = item.qrCode.uuid;
                item.smartName = item.qrCode.name;
                data.push(item);
                if(item.status == true) {
                  i += 1;
                }else j += 1;
              })
              this.list[1].count = i;
              this.list[2].count = j;
              data = data.sort((item1, item2) => item2.id - item1.id);
              if(this.current == 0) {
                this.allOrderData = data;
              }
              if(this.current == 1) {
                this.allOrderData = [];
                data.forEach(item => {
                  if(item.status == true) {
                    this.allOrderData.push(item);
                  }
                })
                this.list[1].count = this.allOrderData.length;
                if(this.allOrderData.length == 0) {
                  this.goodsShow = false;
                }
              }
              if(this.current == 2) {
                this.allOrderData = [];
                data.forEach(item => {
                  if(item.status == false) {
                    this.allOrderData.push(item);
                  }
                })
                this.list[2].count = this.allOrderData.length;
                if(this.allOrderData.length == 0) {
                  this.goodsShow = false;
                }
              }
            }
          })
        }).catch((err) => {
        	console.log(err)
        })
      },
			change(index) {
				this.current = index;
        this.getOrderList();
			},
      closeCabinet(item) {
        let obj = {};
        obj.cabinet = item.cabinetAddr;
        obj.open = false;
        cabinetControl(obj).then((res) => {
          this.getOrderList();
          uni.showToast({
            title: '关仓成功',
            duration: 2000
          });
        }).catch((err) => {
          uni.showToast({
            title: err.response.data.message,
            icon: "error",
            duration: 2000
          });
        })
      }
		}
	}
</script>
